<template>
    <el-tabs v-model="activeName">
        <el-tab-pane label="纯js写Vue组件" name="first">
            <write-vue-with-onlyjs :title="'使用template替代<template>'"></write-vue-with-onlyjs>
            <write-vue-with-onlyjs2 :title="'使用Vue.compile'"></write-vue-with-onlyjs2>
        </el-tab-pane>
        <el-tab-pane label="使用render函数" name="second">
            <use-render :title="'初步尝试使用render'"></use-render>
            <el-button @click="mountedInstance">将示例对象挂载在dom上</el-button>
            <div id="test-mount-instance"></div>
        </el-tab-pane>
        <el-tab-pane label="第一个参数" name="third">
            <div>第一个参数为Function</div>
            <param1-function :index="1"></param1-function>
            <param1-function :index="2"></param1-function>
            <div>第一个参数为Object</div>
            <param1-object :index="2"></param1-object>
        </el-tab-pane>
        <el-tab-pane label="第二个参数" name="fourth">
            <param2-only-object></param2-only-object>
        </el-tab-pane>
        <el-tab-pane label="第三个参数" name="five"
            >定时任务补偿</el-tab-pane
        >
    </el-tabs>
</template>

<script>
import writeVueWithOnlyjs from "./write-vue-with-onlyjs";
import writeVueWithOnlyjs2 from "./write-vue-with-onlyjs2";
import useRender from "./use-render";
import instanceObj from "./provide-vue-instance.js";
import param1Function from "./param1-function.js"
import param1Object from "./param1-object.js"
import param2OnlyObject from "./param2-only-object";
export default {
    components: {
        writeVueWithOnlyjs,
        writeVueWithOnlyjs2,
        useRender,
        param1Function,
        param1Object,
        param2OnlyObject
    },
    data() {
        return {
            activeName: "third",
            show: false,
            key: Date.now()
        }
    },
    
    methods: {
        showDialog() {
            this.show = true;
            this.key = Date.now();
        },
        mountedInstance() {
            instanceObj.$mount("#test-mount-instance");
        }
    },
};
</script>

<style>
</style>